@import "@/styles/__index.less";

.attend-left {
  position: relative;
  width: 375px;
  padding: 0px 15px;
  padding-top: 43px;
  margin: 20px;
  background-color: rgba(0, 26, 40, 0.61);
  pointer-events: auto;
  display: flex;
  flex-direction: column;

  :deep(.group-title) {
    position: absolute;
    top: 0;
    left: 0;
  }

  .attend-l1 {
    //flex: 1;
    height: 263px;
    display: flex;
    flex-direction: column;

    :deep(.stat-group:nth-child(2) .icon) {
      background-image: url("@/assets/overview-r2-icon-1.png");
    }

    :deep(.stat-group:nth-child(3) .icon) {
      background-image: url("@/assets/attend-l1-icon-2.png");
    }
  }

  .attend-l2 {
    height: 320px;
    display: flex;
    flex-direction: column;

    .person-stat-box {
      flex: 1;
      height: 0;
      margin: 10px 0px;
    }
  }

  .attend-l3 {
    flex: 1;
    height: 0;
    display: flex;
    flex-direction: column;

    .table-box {
      flex: 1;
      height: 0;
      margin: 10px 0px;
    }
  }
}

.attend-middle {
  flex: 1;
  width: 0px;
  margin: 20px 0px;
  //pointer-events: auto;
  display: flex;
  flex-direction: column;
  //overflow-y: hidden;

  .room-list-box {
    height: 100%;
    box-sizing: border-box;
    padding-top: 50px;
  }
}

.attend-right {
  position: relative;
  width: 375px;
  padding: 0px 15px;
  padding-top: 182px;
  margin: 20px;
  background-color: rgba(0, 26, 40, 0.61);
  pointer-events: auto;
  display: flex;
  flex-direction: column;

  :deep(.group-title) {
    position: absolute;
    top: 0;
    left: 0;
    .roomInstructions{
      //display: flex;
      //justify-content: flex-end;
      margin-left: auto;
      margin-right: 15px;
      //align-self: flex-end;
      //position: absolute;
      //right: 0;
      //top: 32px;
    }
  }

  .wrap-1 {
    height: 130px;
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 9;
    padding: 0px 15px;
    margin-top: 52px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    background-image: url("@/assets/attend-l2-bg-1.png");
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;

    .icon {
      width: 56px;
      height: 56px;
      background-image: url("@/assets/attend-r1-icon.png");
      background-size: contain;
      background-position: center;
      background-repeat: no-repeat;
    }

    .line {
      flex: 1;
      height: 40px;
      margin: 0px 6px;
      background-image: url("@/assets/attend-l2-line.png");
      background-size: contain;
      background-position: center;
      background-repeat: no-repeat;
    }

    .stat-box {
      display: flex;
      justify-content: flex-end;
      flex-direction: column;
      align-items: flex-end;
      .pmzd-orange;
      font-size: 23px;
    }
  }

  .timeline-btn-group-box {
    height: 600px;
    margin-top: 40px;
    overflow-y: auto;
  }

  .attend-r1 {
    flex: 1;
    height: 0;
    display: flex;
    flex-direction: column;
    position: relative;

    .room-info-box {
      flex: 4;
    }

    .person-list-box {
      flex: 11;
      height: 0;
    }
  }
}
